<template>
	<view class="padding">
		<view class="list">
			<view class="card" v-for="(i, k) in list" :key="k">
				<view class="left">
					<view class="title">
						<image class="img" :src="i.icon_url" mode="aspectFill"></image>
						<text class="text-cut" style="max-width: 200rpx;">{{i.cn_name}}</text>
					</view>
					<view class="text">
						{{i.trade_24h}}
					</view>
				</view>
				<view class="mid">
					<view class="title">
						${{i.price}}
					</view>
					<view class="text">
						￥{{i.price_cny}}
					</view>
				</view>
				<button class="cu-btn btn" :class="{'btn--red': i.change < 0}">{{i.change > 0 ? '+' + i.change : i.change}}%</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this.getCoin();
		},
		methods: {
			getCoin() {
				this.$u.get('/coin/data').then(res => {
					this.list = res.data.result.coin
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		color: #fff;
		background: #1B1B3B;
		padding: 30rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		line-height: 2;

		.left {
			width: 45%;

		}

		.mid {
			width: 35%;
		}

		.btn {
			padding: 0 30rpx;
			background: #00D28B;
			color: #fff;
		}

		.btn--red {
			background: red;
		}

		.title {
			white-space: nowrap;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.title .inner-text {
			font-weight: 500;
			color: #9F9FAA;
			display: inline-block;
			margin-left: 20rpx;
		}

		.text {
			font-size: 30rpx;
			color: #9F9FAA;
		}
	}
</style>
